<template>
    <div class="login clearfix">
        <div class="container">
            <el-row>
                <el-col :span="12">
                    <div class="left clearfix">
                        <div style="background-color: #2984f8;margin-top: 20px">
                            <span style="color: white;margin-left: 30px">家庭医生后台管理系统</span>
                        </div>
                        <div class="clearfix" style="margin:0 auto;background-color: #2984f8;height: 606px">
                            <div style="width:400px;margin-right: auto;margin-left: auto;margin-top: 160px">
                                <el-image
                                        src="https://cloud.axureshop.com/gsc/J0TR09/3c/83/2c/3c832cdbee944034a90088690a53565c/images/登录/u1100.png?token=e1602f9ae1d4257200078b2d7e02d80a0d640852fca11a347a85fdee16e60242"
                                        style=""></el-image>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="right">
                        <div class="clearfix" style="margin: 0 auto; background-color: white;width: 70%;height: 100%">
                            <div style="margin-left: auto;margin-right: auto;margin-top:120px;width: 50px;height: 50px">
                                <el-image
                                        src="https://cloud.axureshop.com/gsc/J0TR09/3c/83/2c/3c832cdbee944034a90088690a53565c/images/组件_规范/u402.jpg?token=a894e1a4f60b3eaa5c122853db6815c0b77cf9b7855bb4ded5af8648e7e00c35"></el-image>
                            </div>
                            <div class="clearfix"
                                 style="background-color:white;color: #322f2d;font-size: 24px; font-weight: bold">
                                <p style="margin: 0 auto;width: 100px">欢迎登录</p>
                            </div>
                            <div class="clearfix"
                                 style="background-color: white;margin-left: auto;margin-right: auto;margin-top: 60px">
                                <div>
                                    <el-form ref="loginForm" :model="loginUser" :rules="loginRules">
                                        <div style="width: 80%;margin-left: 10%">
                                            <el-form-item prop="phone">

                                                <el-input v-model="loginUser.phone" placeholder="请输入手机号"
                                                          size="large" style="width: 100%;"></el-input>

                                            </el-form-item>
                                        </div>
                                        <div style="width: 80%;margin-left: 10%">
                                            <el-form-item prop="password">

                                                <el-input v-model="loginUser.password" placeholder="请输入密码"
                                                          show-password size="large" style="width: 100%;"></el-input>
                                            </el-form-item>
                                        </div>
                                        <div style="width: 80%;margin-left: 10%">
                                            <el-form-item prop="checked">
                                                <el-checkbox-group v-model="loginUser.checked">
                                                    <div style="height: 25px">
                                                        <el-checkbox label="我已阅读并同意" name="checked"
                                                                     style=""></el-checkbox>
                                                        <el-link style="margin-top: -13px" type="info"
                                                                 @click.prevent="">
                                                            《用户隐私政策》
                                                        </el-link>
                                                    </div>

                                                </el-checkbox-group>
                                            </el-form-item>
                                        </div>

                                        <el-button size="large" style="margin-top:0;margin-left:40px;width: 80%"
                                                   type="success"
                                                   @click="onlogin">登录
                                        </el-button>
                                    </el-form>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>

import {mapActions} from "vuex/dist/vuex.mjs";
import {ElMessageBox} from "element-plus";

export default {
    name: "login",
    data() {
        return {
            loginUser: {
                phone: '',
                password: '',
                checked: [],
            },
            loginRules: {
                phone: {required: true, message: '用户名不能为空', trigger: 'blur'},
                password: {required: true, message: '密码不能为空', trigger: 'blur'},
                checked: {type: 'array', required: true, message: '必须同意验证', trigger: 'checked'}
            },
        }
    },
    methods: {
        ...mapActions(['doLogin']),
        onlogin() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.doLogin(this.loginUser).then(res => {
                        if (res.data.code === 200) {
                            this.$router.replace("/home")
                        } else {
                            ElMessageBox.alert(res.data.msg, '提示', {
                                confirmButtonText: '确定',
                                callback: () => {
                                    this.loginUser.phone = '';
                                    this.loginUser.password = '';
                                }
                            })
                        }
                    })
                } else {
                    return false;
                }
            })
        }
    },
}
</script>

<style lang="less" scoped>
.login {
    background-color: whitesmoke;
    width: 100%;
    height: 100%;

    .container {
        margin: 100px auto;
        background-color: black;
        width: 70%;
        height: 70%;
    }
}

.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

.left {
    background-color: #2984f8;
    width: 100%;
    height: 100%;

}

.right {
    background-color: white;
    width: 100%;
    height: 100%;
}


</style>